<template>
  <nav id="nav">
    <van-tabs
      v-model:active="active"
      :ellipsis="false"
      line-width="26px"
      line-height="3px"
    >
      <van-tab title="游戏库"></van-tab>
      <van-tab title="云玩"></van-tab>
      <van-tab title="预约"></van-tab>
    </van-tabs>
    <div class="download">
      <img src="@\assets\images\download.png" alt="下载" />
      <img src="@\assets\images\accelerate.png" alt="加速" class="accelerate" />
      <Tabhead />
    </div>
  </nav>
  <ul class="count-wrap">
    <li class="local">
      <span class="iconfont icon-yaogan"></span>
      本机
      <span class="count">12</span>
    </li>
    <li>
      <span class="iconfont icon-gengxin"></span>
      更新
      <span class="updatanum count">5</span>
    </li>
    <li>
      <span class="iconfont icon-wenjianjia"></span>
      玩过
      <span class="count">20</span>
    </li>
  </ul>
  <div class="order">
    <span class="sort">
      默认排序
      <img src="@\assets\images\down-arrow.png" alt="" />
    </span>
    <div class="play-time">
      <img src="@\assets\images\time.png" alt="" />
      共261小时
    </div>
  </div>
  <GameList />
</template>

<script>
import { ref, reactive } from "vue";
import GameList from "@/components/mygame/GameList.vue";
import Tabhead from "@/components/public/Tab-head.vue";
export default {
  setup() {
    const active = ref(0);
    const state = reactive({
      value1: 0,
    });
    const option1 = [
      { text: "默认排序", value: 0 },
      { text: "根据游戏时长升序", value: 1 },
      { text: "根据游戏时长降序", value: 2 },
    ];
    return {
      active,
      state,
      option1,
    };
  },
  components: {
    GameList,
    Tabhead,
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
nav {
  height: 60px;
  .flex(space-between, center);
  .download {
    .flex(space-between, center);
    padding-right: 17px;
    img {
      width: 22px;
      height: 22px;
      margin: 0 9px;
    }
    .accelerate {
      margin-right: 16px;
    }
  }
}
.count-wrap {
  height: 40px;
  .flex();
  li {
    color: #cccccc;
    width: 33.3%;
    height: 19px;
    border-right: 1px solid #ccc;
    text-align: center;
    font-size: 15px;
    line-height: 19px;
    &:last-child {
      border-right: none;
    }
    .iconfont {
      font-size: 17px;
    }
    .count {
      height: 19px;
      font-size: 12px;
    }
    .updatanum {
      display: inline-flex;
      width: 16px;
      height: 16px;
      border: 2px solid #ea8026;
      justify-content: center;
      align-items: center;
      border-radius: 5px 5px;
      color: #ea8026;
      font-weight: 900;
    }
  }
  .local {
    color: #34c3c6;
  }
}
.order {
  height: 38px;
  .flex(space-between, flex-end);
  border-bottom: 1px solid #ccc;
  padding: 0 13px 0 16px;
  color: #999999;
  .sort {
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    img {
      width: 7px;
      height: 4px;
    }
  }
  .play-time {
    width: 100px;
    height: 28px;
    border-radius: 3px 3px 0 0;
    font-size: 15px;
    .flex();
    font-weight: 900;
    background-color: #f5f5f5;
    img {
      width: 13px;
      height: 13px;
      margin-right: 2px;
    }
  }
}
</style>
